<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { ComponentSize } from 'element-plus'
import { queryMessage, readMessage } from '../assets/net/NetUtils';
import { userInfoStore } from '../assets/userStore/userStore';
import { MessageModel } from '../assets/model/Message';

const size = ref<ComponentSize>('default')
const userStore = userInfoStore()
let messages = ref<Array<MessageModel>>();
let isEmpty = ref(true)

onMounted(() => {
    queryMessage(userStore.uid)
        .then((value) => {
            messages.value = value.data
            if (value.data.length === 0) {
                isEmpty.value = true
            } else {
                isEmpty.value = false
            }
        })
})

const read = (mid: number) => [
    readMessage(mid)
        .then(() => {
            queryMessage(userStore.uid)
                .then((value) => {
                    messages.value = value.data
                    if (value.data.length === 0) {
                        isEmpty.value = true
                    } else {
                        isEmpty.value = false
                    }
                })
        })
]
</script>

<template>
    <el-scrollbar height="100%">
        <el-text style="font-size: large;font-weight: bold;">我的消息</el-text>
        <el-space wrap :size="size" fill style="width: 100%;margin-top: 2%;" v-show="!isEmpty">
            <div v-for="item in messages" :key="item.mid">
                <el-card shadow="hover">
                    <el-row justify="center" align="middle">
                        <el-col :span="14">
                            <el-row>
                                <el-col :span="24"><el-text style="font-size: large;font-weight: bold;">{{ item.title
                                        }}</el-text></el-col>
                                <el-col :span="24" style="margin-top: 2%;"><el-text>{{ item.content
                                        }}</el-text></el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="6"><el-text>{{ item.createTime }}</el-text></el-col>
                        <el-col :span="4">
                            <el-button type="success" plain style="width: 100%;padding: 3%;"
                                @click="read(item.mid!)">标记已读</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
        <el-empty v-show="isEmpty" style="width: 100%;height: 100%;" description="您还没有收到消息哦～" />
    </el-scrollbar>
</template>